<template>
  <div class="top-right-btn" :style="style">
    <t-row>
      <t-space>
        <t-tooltip
          class="item"
          effect="dark"
          :content="showSearch ? '隐藏搜索' : '显示搜索'"
          placement="top"
          v-if="search"
        >
          <t-button shape="circle" @click="toggleSearch()">
            <template #icon>
              <t-icon name="search" />
            </template>
          </t-button>
        </t-tooltip>
        <t-tooltip class="item" effect="dark" content="刷新" placement="top">
          <t-button shape="circle" @click="refresh()">
            <template #icon>
              <t-icon name="refresh" />
            </template>
          </t-button>
        </t-tooltip>
        <t-tooltip
          class="item"
          effect="dark"
          content="显隐列"
          placement="top"
          v-if="showColumn != null"
        >
          <t-button shape="circle" @click="toggleColumn()">
            <template #icon>
              <t-icon name="view-column" />
            </template>
          </t-button>
        </t-tooltip>
      </t-space>
    </t-row>
  </div>
</template>

<script setup>
const props = defineProps({
  showSearch: {
    type: Boolean,
    default: true,
  },
  showColumn: {
    type: Boolean,
    default: null,
  },
  search: {
    type: Boolean,
    default: true,
  },
  gutter: {
    type: Number,
    default: 10,
  },
});

const emits = defineEmits([
  "update:showSearch",
  "queryTable",
  "update:showColumn",
]);

// 显隐数据
const value = ref([]);
// 弹出层标题
const title = ref("显示/隐藏");
// 是否显示弹出层
const open = ref(false);

const style = computed(() => {
  const ret = {};
  if (props.gutter) {
    ret.marginRight = `${props.gutter / 2}px`;
  }
  return ret;
});

// 搜索
function toggleSearch() {
  emits("update:showSearch", !props.showSearch);
}

// 刷新
function refresh() {
  emits("queryTable");
}

// 打开显隐列
function toggleColumn() {
  emits("update:showColumn", !props.showColumn);
}
</script>

<style lang="scss" scoped>
:deep(.el-transfer__button) {
  border-radius: 50%;
  display: block;
  margin-left: 0px;
}
:deep(.el-transfer__button:first-child) {
  margin-bottom: 10px;
}

.my-el-transfer {
  text-align: center;
}
</style>
